<template>
  <div class='app-container'>
    <!-- 顶部 -->
    <el-card>
      <el-form ref="form"
               :model="form"
               label-width="80px">
        <!-- 顶部搜索 -->
        <el-col :span="5">
          <el-form-item label="关键字">
            <el-input v-model.trim="searchValue"
                      placeholder="根据文章标题搜索"></el-input>
          </el-form-item>
        </el-col>
        <!-- 顶部选择 -->
        <el-col :span="4">
          <el-form-item label="状态">
            <el-select v-model="state"
                       placeholder="请选择"
                       class="top-select">
              <el-option label="是"
                         value="1"></el-option>
              <el-option label="否"
                         value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3"
                class="top-button">
          <el-button @click="cleanTopInput">清除</el-button>
          <el-button type="primary"
                     @click="seek">搜索</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="success"
                     class="top-addButton"
                     icon="el-icon-edit"
                     @click="openAdd">新增标签</el-button>
        </el-col>

      </el-form>
      <!-- 警告栏 -->
      <el-alert :title="`数据一共${articleInfo.listSum}条`"
                type="info"
                :closable="false"
                show-icon>

      </el-alert>
      <br>
      <!-- 表单组件 -->
      <!-- 子父 -->
      <interview-list ref="childMethod"
                      v-model="articleInfo.listSum"
                      :state="state"
                      @videoShow='showVideo'
                      :searchValue="searchValue"></interview-list>
      <!-- 新增标签 -->
      <el-dialog :visible.sync="isShow"
                 v-if="isShow"
                 title="新增文章">
        <interview-add @close='isShow=false'
                       ref="addClean"
                       @resetGetList='seek()'></interview-add>
      </el-dialog>

    </el-card>

  </div>
</template>

<script>
import InterviewAdd from '../components/interview-add.vue'
import interviewList from '../components/interview-list.vue'
export default {
  components: { interviewList, InterviewAdd },
  name: 'Articles',
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '启用'
        },
        {
          value: '选项2',
          label: '禁用'
        }
      ],
      form: {},
      articleInfo: {},
      searchValue: null,
      state: null,
      isShow: false,
      videoShow: false
    }
  },
  methods: {
    //   搜索按钮
    seek() {
      this.$refs.childMethod.getList()
      this.state = null
    },
    // 打开新增按钮
    addLabels() {
      this.$refs.addList.openAdd()
    },
    // 清除按钮
    cleanTopInput() {
      this.searchValue = null
      this.state = null
      this.$refs.childMethod.getList()
    },
    openAdd() {
      this.isShow = true
    },
    // 向父传值
    showVideo(val) {
      //   console.log(val)
      this.$emit('trueVideo', val)
    }
  }
}
</script>

<style scoped lang='less'>
.top-select {
  margin-right: 15px;
}
.top-addButton {
  position: absolute;
  right: 50px;
}
</style>
